<script>
  import { componentName } from '$lib/ecs';
  import Counter from '../Counter.svelte';
  import { FreeStats } from './stat';

  let { stat, character, tick } = $props();

  let amount = $derived((tick, stat.amount[character]));

  const minus = () => {
    // TODO: keep min value
    if (stat.amount[character] > 1) {
      --stat.amount[character];
      ++FreeStats.amount[character];
      tick = !tick;
    }
  };

  const plus = () => {
    if (FreeStats.amount[character] > 0) {
      ++stat.amount[character];
      --FreeStats.amount[character];
      tick = !tick;
    }
  };
</script>

<Counter label={componentName(stat)} {amount} {plus} {minus} />
